<template>
  <view class="wrapper">
    <view class="nav" :style="{paddingTop: statusbarHeight + 'px'}">
      <view class="title">
        <view class="back" @click="back">
          <u-icon name="arrow-left" color="#333" size="18px"></u-icon>
        </view>
        <text class="text">提现管理</text>
      </view>
      <view class="tab">
        <u-subsection
            mode="subsection"
            bgColor="#f7f8f9"
            inactiveColor="#666666"
            :activeColor="activeColor"
            :list="tabs"
            @change="changeIndex"
            :current="current"
            fontSize="24rpx"></u-subsection>
      </view>
      <view class="btn" v-if="!showCash">
        <u-button @click="openCash" type="primary" size="small" text="提一笔"></u-button>
      </view>
    </view>
    <view class="list" v-if="list.length > 0 && !showCash">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="amount">￥{{ item.amount * 1 }}</view>
        <view class="desc">
          <view class="m">提现金额: ￥{{ item.amount * 1 }}</view>
          <view class="m">服务费: ￥{{ item.service * 1 }}</view>
          <view class="m">实际到帐: ￥{{ item.amount * 1 - item.service * 1 }}</view>
          <view class="name">姓名: {{ item.nickname }}</view>
          <view class="bank">银行: {{ item.bank_name }}</view>
          <view class="card">银行卡: {{ item.bank_number }}</view>
          <view class="mobile">预留手机: {{ item.mobile }}</view>
          <view class="status">状态: <text>{{ item.status | statusText }}</text></view>
          <view class="reject" v-if="item.status * 1 === -1">驳回原因: <text>{{ item.reject }}</text></view>
          <view class="time" v-if="item.status * 1 === 1">到帐时间: {{ item.update_time }}</view>
          <view class="time">提现时间: {{ item.create_time }}</view>
        </view>
      </view>
    </view>
    <view class="list nothing" v-else>
      暂无相关信息...
    </view>
    <!-- 提一笔弹框 -->
    <u-popup :show="showCash" @close="closeCash" mode="bottom" :zIndex="999999">
      <!-- 这里个一个v-if, 解决小程序中生命周期bug -->
      <view class="cash" v-if="showCash">
        <cash-form @submit="submitCash" />
      </view>
    </u-popup>
    <arrow />
    <u-back-top bottom="80" right="40" :scroll-top="scrollTop" icon="arrow-up" :customStyle="{'opacity': '0.99'}"></u-back-top>
  </view>
</template>

<script>
import color from '@/config/color.js'
import Arrow from '../../components/arrow'
import CashForm from './components/CashForm'
import config from '../../config/config'
import base64 from '../../util/base64'
import Service from '../../api/service'
const serviceModel = new Service()

export default {
  components: {
    Arrow,
    CashForm
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  filters: {
    statusText(v) {
      let text = ''
      if (+v === 0) {
        text = '审核中'
      } else if (+v === 1) {
        text = '已到帐'
      } else if (+v === -1) {
        text = '已驳回'
      }
      return text
    }
  },
  data() {
    return {
      activeColor: color.main_color,
      scrollTop: 0,
      showCash: false,
      baseUrl: config.baseUrl,
      tabs: ['全部', '已到帐', '审核中', '已驳回'],
      current: 0,
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      },
      statusbarHeight: 0,
    }
  },
  onPullDownRefresh() {
    this.queryList = {
      page: 0,
      pageSize: 10,
      busy: false
    }
    this.getList()
  },
  onReachBottom() {
    this.getList(true)
  },
  onLoad(options) {
    uni.getSystemInfo({
      success: res => {
        this.statusbarHeight = res.statusBarHeight
      }
    })
    const index = +options.type || 0
    this.current = index
    this.getList()
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    changeIndex(index) {
      this.current = index
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
      this.getList()
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        serviceModel.cashList({
          ...this.queryList,
          type: this.current
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          uni.stopPullDownRefresh();
          // console.log(this.list)
        })
      }
    },
    openCash() {
      this.showCash = true
    },
    closeCash() {
      this.showCash = false
    },
    submitCash() {
      this.showCash = false
      this.changeIndex(2)
      // uni.showToast({
      //   icon: 'none',
      //   title: '操作成功'
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding-bottom: 20px;
  .nav {
    background: white;
    z-index: 99999;
    position: sticky;
    top: 0;
    .title {
      height: 44px;
      background: white;
      display: flex;
      align-items: center;
      .back {
        width: 44px;
        display: flex;
        justify-content: center;
      }
      .text {
        flex: 1;
        text-align: center;
        font-weight: 700;
        margin-left: -44px;
      }
    }
    .tab {
      background: white;
      height: 35px;
      padding: 5px 10px;
      position: sticky;
      top: 0;
    }
  }
  .btn {
    margin: 0 20rpx;
    letter-spacing: 2px;
  }
  .list {
    margin: 20rpx;
    min-height: 100px;
    //padding: 20rpx;
    //background: white;
    font-size: 24rpx;
    //border-radius: 10rpx;
    .item {
      background: white;
      padding: 20rpx;
      border-radius: 10rpx;
      margin-bottom: 10px;
      display: flex;
      .amount {
        width: 160rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        letter-spacing: 1px;
        color: red;
      }
      .desc {
        flex: 1;
        padding-left: 10px;
        //background: red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        view {
          height: 20px;
        }
        .status, .amount {
          text {
            color: red;
            margin-left: 10rpx;
          }
        }
        .amount {
          text {
            font-size: 26rpx;
            font-weight: 700;
          }
        }
        .time {
          color: #ccc;
        }
      }
    }
  }
  .nothing {
    color: #ccc;
    line-height: 100px;
    background: white;
    text-align: center;
  }
  .cash {
    min-height: 300px;
    box-sizing: border-box;
    padding: 20rpx;
  }
}
</style>
